<template>
  <div class="app-container">
    <div class="menu-container">
      <el-form :inline="true" style="float: left;">
        <el-button size="mini" type="primary" @click="dialogFormVisible=true">添加分类</el-button>
      </el-form>
      <div style="clear:both"/>
    </div>
    <el-table v-loading="listLoading" :data="page.records" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="分类名">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="modifyCategory(scope.row)">{{ scope.row.name }}</el-button>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state_desc }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" label="显示顺序">
        <template slot-scope="scope">
          <span>{{ scope.row.show_order }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Actions" width="250">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="small" icon="el-icon-edit" @click="modifyCategory(scope.row)">修改</el-button> -->
          <el-button type="danger" size="small" icon="el-icon-delete" @click="delCategory(scope.row)">删除</el-button>
          <el-button type="primary" size="small" @click="managerCategoryOptions(scope.row)">分类选项管理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="page.recordsTotal>0" :total="page.recordsTotal" :page.sync="page.pageNum" :page-sizes="[50, 100]" :limit.sync="page.pageSize" @pagination="getList" />

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="categoryForm">
        <el-form-item :label-width="formLabelWidth" label="分类名称">
          <el-input v-model="categoryForm.name" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序">
          <el-input-number v-model="categoryForm.show_order" :min="1" :max="100" size="mini" label="排序"/>
          <span>排序值越小排序越靠前</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态">
          <el-select v-model="categoryForm.state" placeholder="请选择" size="mini">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="createOrUpdateCategory()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogCategoryOptionsVisible" title="分类选项管理">
      <el-form :model="optionForm">
        <el-form-item :label-width="formLabelWidth" label="分类选项名称">
          <el-input v-model="optionForm.title" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分类选项描述">
          <el-input v-model="optionForm.desc" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序">
          <el-input-number v-model="optionForm.show_order" :min="1" :max="100" size="mini" label="排序"/>
          <span>排序值越小排序越靠前</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态">
          <el-select v-model="optionForm.state" placeholder="请选择" size="mini">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button v-if="isModifyCategoryOption" type="primary" size="mini" @click="createCategoryOption()">确定修改</el-button>
          <el-button v-else type="primary" size="mini" @click="createCategoryOption()">新增分类选项</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="listLoading" :data="optionsPage.records" border fit highlight-current-row style="width: 100%" height="280">
        <el-table-column prop="id" label="ID" align="center" width="80"/>
        <el-table-column prop="title" label="选项名" align="center" width="140"/>
        <el-table-column prop="state_desc" label="状态" align="center" width="80"/>
        <el-table-column prop="show_order" label="显示顺序" align="center" width="80"/>
        <el-table-column prop="create_time" label="创建时间" align="left" width="100"/>
        <el-table-column prop="" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="modifyCategoryOption(scope.row)">修改</el-button>
            <el-button size="small" type="text" @click="delCategoryOption(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="optionsPage.recordsTotal>0" :total="optionsPage.recordsTotal" :page-sizes="[50, 100]" :limit.sync="optionsPage.pageSize" :options-pagesync.="optionsPage.pageNum" @pagination="getList" />
    </el-dialog>

  </div>
</template>

<script>
import { fetchList, fetchOptionList, createCategory, updateCategory, deleteCategory, deleteCategoryOption, createCategoryOption, updateCategoryOption } from '@/api/category'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'CategoryList',
  components: { Pagination },
  data() {
    return {
      dialogTitle: '新增分类',
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      currentCategory: undefined,
      formLabelWidth: '100px',
      dialogFormVisible: false,
      isModifyCategoryOption: false,
      dialogCategoryOptionsVisible: false,
      stateOptions: [{ value: 0, label: '正常' }, { value: 1, label: '禁用' }],
      categoryForm: { 'id': undefined, 'name': '', 'show_order': 1, 'state': 0 },
      optionForm: { 'id': undefined, 'title': '', 'show_order': 1, 'state': 0, 'desc': '', 'category_id': -1 },
      optionsPage: { pageNum: 1, pageSize: 100, pageTotal: 0, recordsTotal: 0, records: [] },
      page: { pageNum: 1, pageSize: 100, pageTotal: 0, recordsTotal: 0, records: [] }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    clearCategoryForm() {
      this.categoryForm = { 'id': undefined, 'name': '', 'show_order': 1, 'state': 0 }
    },
    clearOptionForm() {
      this.optionForm = { 'id': undefined, 'title': '', 'show_order': 1, 'state': 0, 'desc': '', 'category_id': -1 }
    },
    managerCategoryOptions(category) {
      this.clearOptionForm()
      // 记录当前的分类数据
      this.currentCategory = category
      this.isModifyCategoryOption = true
      this.optionForm.category_id = this.currentCategory.id
      this.dialogCategoryOptionsVisible = true
      // 查询分类下的选项数据
      this.getCateOptions()
    },
    createOrUpdateCategory() {
      let msg = '更新成功'
      let reqestFunc = updateCategory
      if (this.categoryForm.id === undefined || this.categoryForm.id === '') {
        msg = '创建成功'
        reqestFunc = createCategory
      }
      reqestFunc(this.categoryForm).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: msg, type: 'success' })
          this.dialogFormVisible = false
          this.clearCategoryForm()
          this.getList()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    createCategoryOption() {
      let msg = '更新成功'
      let reqestFunc = updateCategoryOption
      if (this.optionForm.id === undefined || this.optionForm.id === '') {
        msg = '创建成功'
        reqestFunc = createCategoryOption
      }
      this.optionForm.category_id = this.currentCategory.id
      reqestFunc(this.optionForm).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: msg, type: 'success' })
          this.dialogFormVisible = false
          this.clearOptionForm()
          this.getCateOptions()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    modifyCategory(category) {
      this.categoryForm.id = category.id
      this.categoryForm.name = category.name
      this.categoryForm.show_order = category.show_order
      this.categoryForm.state = category.state
      this.dialogTitle = '修改分类'
      this.dialogFormVisible = true
    },
    modifyCategoryOption(categoryOption) {
      this.optionForm.id = categoryOption.id
      this.optionForm.title = categoryOption.title
      this.optionForm.show_order = categoryOption.show_order
      this.optionForm.state = categoryOption.state
      this.optionForm.category_id = categoryOption.category_id
      this.optionForm.desc = categoryOption.desc
    },
    delCategory(category) {
      const data = { id: category.id, type: 'category' }
      this.myConfirm('即将删除分类, 是否继续?', this._delCategory, data, '已取消操作')
    },
    delCategoryOption(cateOption) {
      const data = { id: cateOption.id, type: 'categoryOption' }
      this.myConfirm('即将删除分类选项, 是否继续?', this._delCategory, data, '已取消操作')
    },
    _delCategory(data) {
      let requestFunc = deleteCategory
      let responseCallback = this.getList
      if (data.type === 'categoryOption') {
        requestFunc = deleteCategoryOption
        responseCallback = this.getCateOptions
      }
      requestFunc(data.id).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: '操作成功', type: 'success' })
          responseCallback()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    getCateOptions() {
      if (this.currentCategory == null || this.currentCategory === undefined) {
        return
      }
      fetchOptionList({
        pageSize: this.page.page_size,
        pageNum: this.page.page_num,
        category_id: this.currentCategory.id
      }).then(response => {
        const r = response.data
        console.log(r)
        if (r.code === 0) {
          this.optionsPage = r.data
        } else {
          this.$message.error('服务端出错了哦')
        }
      })
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        const data = response.data
        if (data.code !== 0) {
          this.$message.error(data.msg)
        }
        this.page = data.data
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
